<template>
  <div class="app-container">
    <div class="header">
      <div class="title">
        <i class="el-icon-data-analysis"></i><span>仓库零货作业数据</span>
      </div>
      <div>
        <el-date-picker
          v-model="Querydate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-button type="primary" @click="handleClick">查询</el-button>
      </div>
    </div>
    <div class="boxContent">
      <div class="item1">
        <div class="hname">
          <i class="el-icon-caret-right"></i>{{ hzdata.hz }}
        </div>
        <div class="one">
          <span>今日下单条目数</span><span>{{ totalTms }}</span>
        </div>
        <div class="one">
          <span>零货出库条目数</span><span>{{ hzdata.cktm }}</span>
        </div>
        <div class="one">
          <span>补货件数</span><span>{{ hzdata.bhjs }}</span>
        </div>
        <div class="one">
          <span>未开始作业单量</span><span>{{ hzdata.wdjs }}</span>
        </div>
        <div class="one">
          <span>未开始作业条目数</span><span>{{ hzdata.wtms }}</span>
        </div>
      </div>
      <div class="item2">
        <div class="hname">
          <i class="el-icon-caret-right"></i>{{ wydata.hz }}
        </div>
        <div class="one">
          <span>今日下单条目数</span><span>{{ totalTms1 }}</span>
        </div>
        <div class="one">
          <span>零货出库条目数</span><span>{{ wydata.cktm }}</span>
        </div>
        <div class="one">
          <span>补货件数</span><span>{{ wydata.bhjs }}</span>
        </div>
        <div class="one">
          <span>未开始作业单量</span><span>{{ wydata.wdjs }}</span>
        </div>
        <div class="one">
          <span>未开始作业条目数</span><span>{{ wydata.wtms }}</span>
        </div>
      </div>
      <div class="item3">
        <div class="hname">
          <i class="el-icon-caret-right"></i>{{ qtdata.hz }}
        </div>
        <div class="one">
          <span>今日下单条目数</span><span>{{ totalTms2 }}</span>
        </div>
        <div class="one">
          <span>零货出库条目数</span><span>{{ qtdata.cktm }}</span>
        </div>
        <div class="one">
          <span>补货件数</span><span>{{ qtdata.bhjs }}</span>
        </div>
        <div class="one">
          <span>未开始作业单量</span><span>{{ qtdata.wdjs }}</span>
        </div>
        <div class="one">
          <span>未开始作业条目数</span><span>{{ qtdata.wtms }}</span>
        </div>
      </div>
    </div>
    <div class="title"><i class="el-icon-data-line"></i>客户当日下单数据</div>
    <div class="tableContent">
      <el-table
        class="wtable"
        :data="tableData"
        border
        height="177"
        :span-method="objectSpanMethod"
        :summary-method="getSummaries"
        :header-cell-style="{ background: '#55efc4' }"
        show-summary
        ref="table"
      >
        <el-table-column align="center" prop="hz" label="货主名称" width="180">
        </el-table-column>
        <el-table-column align="center" prop="orderType" label="订单类型">
        </el-table-column>
        <el-table-column align="center" prop="djs" label="今日下单">
        </el-table-column>
        <el-table-column align="center" prop="tms" label="今日条目数">
        </el-table-column>
        <el-table-column align="center" prop="price" label="销售金额(单位:元)">
        </el-table-column>
      </el-table>
      <el-table
        class="wtable"
        :data="tableData1"
        border
        height="177"
        :span-method="objectSpanMethod"
        :summary-method="getSummaries"
        :header-cell-style="{ background: '#55efc4' }"
        show-summary
        ref="table1"
      >
        <el-table-column align="center" prop="hz" label="货主名称" width="180">
        </el-table-column>
        <el-table-column align="center" prop="orderType" label="订单类型">
        </el-table-column>
        <el-table-column align="center" prop="djs" label="今日下单">
        </el-table-column>
        <el-table-column align="center" prop="tms" label="今日条目数">
        </el-table-column>
        <el-table-column align="center" prop="price" label="销售金额(单位:元)">
        </el-table-column>
      </el-table>
      <el-table
        class="wtable"
        :data="tableData2"
        border
        height="177"
        :span-method="objectSpanMethod"
        :summary-method="getSummaries"
        :header-cell-style="{ background: '#55efc4' }"
        show-summary
        ref="table2"
      >
        <el-table-column align="center" prop="hz" label="货主名称" width="180">
        </el-table-column>
        <el-table-column align="center" prop="orderType" label="订单类型">
        </el-table-column>
        <el-table-column align="center" prop="djs" label="今日下单">
        </el-table-column>
        <el-table-column align="center" prop="tms" label="今日条目数">
        </el-table-column>
        <el-table-column align="center" prop="price" label="销售金额(单位:元)">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listdata } from "@/api/system/dataAnal";
export default {
  data() {
    return {
      Querydate: new Date().toISOString().split("T")[0],
      hnumber1: null,
      tableData: [],
      tableData1: [],
      tableData2: [],
      hzdata: [],
      wydata: [],
      qtdata: [],
      arrayData: [],
    };
  },
  created() {
    this.getlistdata();
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout();
      this.$refs["table1"].doLayout();
      this.$refs["table2"].doLayout();
    });
  },
  computed: {
    totalTms() {
      return this.tableData.reduce((sum, item) => {
        return sum + Number(item.tms || 0);
      }, 0);
    },
    totalTms1() {
      return this.tableData1.reduce((sum, item) => {
        return sum + Number(item.tms || 0);
      }, 0);
    },
    totalTms2() {
      return this.tableData2.reduce((sum, item) => {
        return sum + Number(item.tms || 0);
      }, 0);
    },
  },
  methods: {
    getlistdata() {
      listdata({ addTime: this.Querydate })
        .then((res) => {
          console.log(res); // 检查返回的数据是否符合预期
          // 解析返回的数据并设置到相应的变量中
          if (res && res.data) {
            this.tableData = res.data.dataHt;
            // this.totalTms = this.tableData.reduce((sum, item) => {
            //   return sum + Number(item.tms || 0);
            // }, 0);
            // console.log(this.totalTms);
            this.tableData1 = res.data.dataWy;
            // this.totalTms1 = this.tableData1.reduce((sum, item) => {
            //   return sum + Number(item.tms || 0);
            // }, 0);
            // console.log(this.totalTms1);
            this.tableData2 = res.data.dataQt;
            // this.totalTms2 = this.tableData2.reduce((sum, item) => {
            //   return sum + Number(item.tms || 0);
            // }, 0);
            // console.log(this.totalTms2);
            this.hzdata = res.data.dataList[0];
            this.wydata = res.data.dataList[1];
            this.qtdata = res.data.dataList[2];
          } else {
            // 处理接口返回的错误数据或其他未预期的情况
            // 这里可以根据具体需求进行相应的处理，比如给出错误提示、使用默认值等
            console.error("接口返回数据异常");
          }
        })
        .catch((error) => {
          // 处理请求失败的情况
          console.error(error); // 输出错误信息或根据需要进行其他处理
        });
    },
    handleClick() {
      listdata({ addTime: this.Querydate })
        .then((res) => {
          console.log(res); // 检查返回的数据是否符合预期
          // 解析返回的数据并设置到相应的变量中
          if (res && res.data) {
            this.tableData = res.data.dataHt;
            this.tableData1 = res.data.dataWy;
            this.tableData2 = res.data.dataQt;
            this.hzdata = res.data.dataList[0];
            this.wydata = res.data.dataList[1];
            this.qtdata = res.data.dataList[2];
          } else {
            // 处理接口返回的错误数据或其他未预期的情况
            // 这里可以根据具体需求进行相应的处理，比如给出错误提示、使用默认值等
            console.error("接口返回数据异常");
          }
        })
        .catch((error) => {
          // 处理请求失败的情况
          console.error(error); // 输出错误信息或根据需要进行其他处理
        });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => parseFloat(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = parseFloat(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += "";
          if (index == 4) {
            sums[index] = sums[index].toFixed(2);
          }
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style lang="scss" src='@/assets/styles/statement.scss' scoped>
</style>
